<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <div id="app" style="border: 2px solid red;">
        <h3>父组件，根组件</h3>
        <!-- 
            父组件如何传递一段 HTML 的结构给子组件呢?
            这里我们就需要使用 slot 组件插槽
         -->
        <child>
            <!-- 不取名字，直接获取，叫做匿名插槽 -->
            <i>我是父组件中定义的一个 HTML 部分</i>
            <!-- 取了名字，那就需要使用 具名插槽 -->
            <i slot="other">我是父组件中另一个 i 标签，具名插槽标签</i>

            <!-- 
                父组件直接传递了 slot 内容标签给了子组件
                如果，又需要子组件来传递数据给 slot 部分，该怎么办？
                作用域插槽
                1. 将 html 结构发送到子组件
                2. 查看子组件 slot 上面是不是有自定义的属性，有的话，就代表需要传递数据 color = "green"
                3. 回到父组件需要发送的 html 结构上，增加一个 slot-scope="props" 来接收数据
                4. 接收到的 props 可以在需要的场景使用，props.color 来使用，这个color 是我们的取的名字，和前面保持一致
                5. 渲染最终我们想要的结果
             -->
            <h3 slot-scope="props" :style="{ color: props.color }">我的父组件中的 H3 标签</h3>

        </child>
    </div>
</body>
<script src="../day06/lib/vue.js"></script>
<script type="text/html" id="child">
    <div  style="border: 2px solid blue;">
        <h3>子组件，child</h3>

        <!-- 子组件中可以直接使用 slot 来接收，父组件中调用子组件标签中间传递的插槽内容 -->
        <slot color="green"></slot>
        <hr />
        <!-- 具名插槽，获取到取了名字的插槽部分内容 -->
        <slot name="other"></slot>

    </div>
</script>
<script>
    // 子组件
    const Child = {
        template: "#child"
    }

    // 根组件，父组件
    new Vue({
        el: "#app",
        components: {
            Child
        }
    })
</script>

</html>